<template>
  <div class="container">
    <el-card v-loading="loading">
      <!-- 输入框+下拉框+按钮 -->
      <el-row>
        <el-col :span="22">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearKeyword">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="success" size="small" @click="isShowAdd = true">
            <i class="el-icon-edit"></i>
            新增技巧
          </el-button>
        </el-col>
      </el-row>
      <!-- 警告提示 -->
      <el-row>
        <el-alert size="small" type="info" show-icon>
          数据一共{{ counts }}条</el-alert
        >
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="indexMethod" label="序号">
        </el-table-column>

        <el-table-column prop="title" label="文章标题" width="360">
          <template #default="{ row }">
            <span>{{ row.title }}</span>
            <a
              v-show="showVideo(row.videoURL)"
              class="el-icon-film"
              href="#"
              @click.prevent="openPlayVideo(row.videoURL)"
            ></a>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="90">
        </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template #default="{ row }">
            {{ row.createTime | forCreateTime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="120"
          :formatter="formatEmployment"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="previewArticle(row.id)"
              >预览</el-button
            >
            <el-button type="text" size="small" @click="showUseBtn(row)">
              {{ row.state === 1 ? "禁用" : "启用" }}
            </el-button>

            <el-button
              :disabled="row.state === 1"
              type="text"
              size="small"
              @click="UpdateisShow(row.id)"
              >修改</el-button
            >
            <el-button
              :disabled="row.state === 1"
              type="text"
              size="small"
              @click="delFn(row.id)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.page"
        :page-size="formInline.pagesize"
        background
        layout=" sizes, prev, pager, next, jumper"
        :page-sizes="[1, 2, 10, 20]"
        :total="counts"
      >
      </el-pagination>
    </el-card>
    <!-- 视频播放器弹框 -->
    <div class="video-preview" v-if="videoURL">
      <div class="close" @click="closeVideo()">
        <span class="el-icon-close"></span>
      </div>
      <div class="box">
        <video ref="video" :src="videoURL"></video>
      </div>
    </div>
    <!-- 新增文章 -->
    <ArticlesAdd :showAddDialog.sync="isShowAdd" @add-articles="getList" />
    <!-- 修改文章 -->
    <ArticlesUpdate
      :showUpdateDialog.sync="isShowUpdate"
      @add-articles="getList"
      :updateId="updateId"
    />
    <!-- 预览文章 -->
    <ArticlesPreview
      :showPreviewDialog.sync="isShowPreview"
      :articleId="articleId"
    />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list, remove, changeState } from '@/api/hmmm/articles.js'
// import obj from '@/api/base/baseApi.js'
import ArticlesAdd from '@/module-hmmm/components/articles-add'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
import ArticlesUpdate from '@/module-hmmm/components/articles-update'

export default {
  components: {
    ArticlesAdd,
    ArticlesPreview,
    ArticlesUpdate
  },
  data () {
    return {
      status: [{
        id: '1',
        value: '启用'
      },
      {
        id: '0',
        value: '禁用'
      }
      ],
      loading: false,
      formInline: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      tableData: [],
      counts: 0,
      // 新增文章
      isShowAdd: false,
      // 预览文章
      isShowPreview: false,
      // 修改文章
      isShowUpdate: false,
      // 预览文章id
      articleId: '',
      // 修改文章id
      updateId: '',
      videoURL: null

    }
  },

  // 日期格式化
  filters: {
    forCreateTime: (value) => {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },

  // 文章列表渲染
  created () {
    this.getList()
  },
  methods: {
    // 点击清除
    clearKeyword () {
      this.formInline.keyword = null
      this.formInline.state = null
      this.formInline.page = 1
      this.formInline.pagesize = 10
      this.getList()
    },

    // 获取文章列表
    async getList () {
      this.loading = true
      const res = await list(this.formInline)
      const { data: { counts, items } } = res
      this.tableData = items
      this.counts = counts
      this.loading = false
    },
    handleSizeChange (val) {
      this.formInline.pagesize = val
      this.formInline.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getList()
    },

    // 序号
    indexMethod (index) {
      return index + 1 + this.formInline.pagesize * (this.formInline.page - 1)
    },
    formatEmployment (row, column, cellValue, index) {
      return cellValue === 0 ? '已禁用' : '已启用'
    },

    // 控制启用和禁用
    async showUseBtn (obj) {
      await changeState({ id: obj.id, state: obj.state === 1 ? 0 : 1 })
      this.$message.success('操作成功')
      obj.state = obj.state === 1 ? 0 : 1
    },

    // 搜索
    async search () {
      this.loading = true
      this.formInline.page = 1
      // const { data: { counts, items } } = await list(this.formInline)
      // this.tableData = items
      // this.counts = counts
      this.getList()
      this.loading = false
    },

    // 视频图标的显隐
    showVideo (videoURL) {
      return !!videoURL
    },

    // 关闭视频弹框
    closeVideo () {
      this.videoURL = null
      this.$refs.video.pause()
    },
    // 点击图标，播放视频
    openPlayVideo (videoUrl) {
      this.videoURL = videoUrl
      console.log(this.videoURL, 9999)
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },

    // 删除文章
    async delFn (id) {
      this.loading = true
      this.tableData.id = id
      await remove(this.tableData)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功!')
        if (this.tableData.length === 1 && this.formInline.page > 1) {
          this.formInline.page--
        }
        this.getList()
      }).catch(() => {
        this.$message.error('删除失败')
      })
      this.loading = false
    },

    // 打开预览文章对话框
    previewArticle (id) {
      this.isShowPreview = true
      this.articleId = '' + id
    },
    // 显示修改
    UpdateisShow (id) {
      this.isShowUpdate = true
      this.updateId = '' + id
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-alert__icon.is-big {
  font-size: 18px;
  width: 18px;
}
::v-deep .el-pagination {
  float: right;
  padding: 20px 5px;

  .el-pagination__jump {
    float: right;
  }

  .btn-prev,
  .el-pager,
  .btn-next {
    float: left;
  }
}
::v-deep .el-icon-film {
  color: aqua;
}
::v-deep .video-player {
  width: 100%;
}
.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
